<%@ page import="com.foxconn.AppDownload.controller.LoginController" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    //request.getScheme()获取协议  request.getServerName()获取服务器的Ip地址   request.getServerPort()获取服务器的端口
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+	request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<title>${app.appName}</title>
<head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js">
</script>

<script>
    $(document).ready(function(){
        //window.history.pushState(null, null, 'https://txz.foxconn.com:8080/itapp/login')

        $("#button1").click(function (){
            //獲取密碼框的密碼
            var password = $("#pwd").val();
            var id = $("#name").data("id");
            var iconUrl = $("#iconPath").data("icon");
            //調用後端接口跳轉到應用詳細頁面
            $.ajax({
                url: 'login1',
                data: {
                    id: id,
                    password: password
                },
                type: 'post',
                dataType: 'json',
                success:function (data){
                    if (data.code=='1'){
                        //登录成功，跳转下載頁面
                        window.location.href="download?id="+id+"&iconUrl="+iconUrl;
                    }else{
                        //提示信息
                        alert(data.message);
                    }
                },
            });

        });

    });
</script>
<style type="text/css">
  a{
    text-decoration: none;
  }
  a:hover{
    color: red;
  }
  a:visited{
    color: blue;
  }
</style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
    
<body style ="margin:0 auto;background-color:#F1EDF1D5">

    <canvas></canvas>
    <script src="jquery/mouse.js"></script>

    <div style="display: block;  width: 100%;height:95px;"><img src="image/top_bg.png" style="width:100%;height:100%;"></img> </div>

    <div style="display: block;  width: 130px; margin:50px auto;margin-bottom: 0px"><img id="iconPath" data-icon="${app.iconUrl}" src="${app.iconUrl}" style="width:120px;height:120px;border-radius:20px;"></img> </div>

    <div style ="width:320px; margin:50px auto;margin-top: 30px;margin-bottom:65px;display: flex; justify-content: center; align-items: center;">
	    <span id="name" data-id="${app.appId}" style ="color:black;font-size:25px;text-align: center">${app.appName}</span>
    </div>

    <div id="help1" style="width:80%; height:30px;margin:0px auto;display: flex; justify-content: center; align-items: center;">
        <span style="display:inline; height:30px;text-align:center;">该应用仅限于内部使用，您必须输入密码才能继续</span>
    </div>

    <div style="display: flex; justify-content: center; align-items: center;margin-top: 20px;">
        <input id="pwd" type="password" placeholder="请输入密码..." style="border-radius: 10px;background-color: #f1f1f1; border:2px solid #9d9d9d; text-align: center; padding: 7px;font-size: 16px;width: 280px;box-sizing: border-box">
    </div>

    <div style="position: relative; left: 50%; transform:translate(-50%, 0%);">
        <button id="button1" style="background:#1BBC9C;width:260px;height:50px;color:white;font-size:20px;margin:0px auto;margin-top: 40px;display:block;border-radius:25px;text-align:center;line-height:50px;border-width:0px;">立刻进入</button>
        <span style="position: absolute;left: 50%; transform:translate(-50%, 50%);  height:40px;text-align:center; font-size: 16px;margin-top: 7px">用手机扫描二维码安装</span>
    </div>

    <div style="display: flex; justify-content: center; align-items: center;margin-top: 70px">
        <div id="qrcode" style="z-index:100;display: inline;  width: 150px;"><img src="${app.qrCodePath}" style="width:150px;height:150px;"></img> </div>

    </div>

</body>

<style>
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /*background-color: rgba(176, 169, 141, 0.99);*/
        background-color: rgba(247, 244, 248, 0.78);
        z-index: -1;
    }
</style>

</html>

 
